<template>
  <div class="ct">
    <div
      class="navigation-bar"
      style="
        display: flex;
        justify-content: center;
        background: linear-gradient(45deg, #db4be5, #405def);
      "
    >
      <div class="navigation-container">
        <div class="title">开始测试</div>
      </div>
    </div>

    <div class="content-container">
      <div class="content">
        <p class="text">导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。 一般导航会有「侧栏导航」和「顶部导航」2 种类型。

选择合适的导航​
选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确）。 以下是「侧栏导航」和 「顶部导航」的区别。

侧栏导航​
可将导航栏固定在左侧，提高导航可见性，方便页面之间切换； 顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。 适用于中后台的管理型、工具型网站。

一级类目​
适用于结构简单的网站：只有一级页面时。 不需要使用面包屑。</p>
        <div class="btn-container">
          <el-button type="primary">进入选题页面</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.navigation-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  background: linear-gradient(45deg, #db4be5, #405def);
  .navigation-container {
    display: flex;
    width: 95%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    height: 80px;

    .title {
      color: #fff;
      font-size: 30px;
    }
  }
}

.content-container {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: left;

  .content {
    width: 90%;
    padding-top: 70px;
    .btn-container {
      margin-top: 50px;
      display: flex;
      justify-content: end;
    }
  }
}
</style>
